<template>
  <div id="Shenghuohui">
    <div id="postDetail">
      <el-breadcrumb separator=">">
        <el-breadcrumb-item :to="{ path: '/' }">系统首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/post' }">岗位设置</el-breadcrumb-item>
        <el-breadcrumb-item>单位列表</el-breadcrumb-item>
      </el-breadcrumb>
      <section>
      <div id="listtree" class="wboxd" :style="'height:'+tableHeight+'px'">
        <el-scrollbar style="height:calc(100% + 25px);">
          <el-input placeholder="输入关键字进行过滤" v-model="filterText" style="width:400px;"></el-input>
          <el-tree default-expand-all node-key="name" :expand-on-click-node="false" :render-content="renderContent" class="filter-tree" :data="deptlist" :filter-node-method="filterNode" ref="tree2" :empty-text="loadingtext"></el-tree>
        </el-scrollbar>
      </div>
        <!--新增界面-->
      </section>
    </div>
  </div>
</template>

<script>
export default {
  watch: {
    filterText (val) {
      this.$refs.tree2.filter(val)
    }
  },
  data () {
    const validateRequire = (rule, value, callback) => {
      if (value === null || value === undefined || value === '') {
        callback(new Error('必填项'))
      } else {
        callback()
      }
    }
    return {
      status: null,
      TheYear: '',
      canCreate: false,
      pingguFiles: false,
      loading: false,
      rules: {
        remark: [{ validator: validateRequire }]
      },
      backDialogVisible: false,
      backForm: {
        remark: ''
      },
      activities: [],
      dialogVisible: false,
      loadingtext: '正在加载...',
      tableHeight: 0,
      shhAuth: 0,
      filterText: '',
      deptlist: [],
      listLoading: false,
      totalnum: 0,
      startBtnsVisible: false,
      startLoading: false,
      Sortkey: '',
      Isace: true,
      shenghuohuiName: '',
      exportloading: false,
      canExport: false,
      shenghuohuiunitId: 0
    }
  },
  methods: {
    handleStatistics () {
      this.$router.push({name: `postStatistics`})
    },
    filterNode (value, data) {
      console.log('val:' + value)
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    renderContent (h, { node, data, store }) {
      return (
        <div class="nodelist" style="width:100%;height:50px;" title={data.title} >
          <div style='float:right'>
            <div ref="EditBtns" style="float:right;height:50px;padding:0 10px;width:200px;">
              <span v-show={data.label === '机关司局' || data.label === '事业单位' || data.label === '派出机构'}>操作</span>
              <el-badge v-show={data.label !== '机关司局' && data.label !== '事业单位' && data.label !== '派出机构' && data.updateFlag} is-dot class="item">
                <el-button size="small" on-click={ () => this.unitshow(data.id) } type="primary">进入</el-button>
              </el-badge>
              <el-button v-show={data.label !== '机关司局' && data.label !== '事业单位' && data.label !== '派出机构' && !data.updateFlag} size="small" on-click={ () => this.unitshow(data.id) } type="primary">进入</el-button>
            </div>
          </div>
          <i class={data.label === '机关司局' || data.label === '事业单位' || data.label === '派出机构' ? 'icon-wenjianjia1 tree-icon iconfont' : 'icon-danwei tree-icon iconfont'} style="float:left" />
          <span title={data.unitName} style={data.depttype === '分类' ? 'font-weight:bolder;line-height:28px' : 'line-height: 50px;display:block;text-overflow:ellipsis;width:600px;overflow:hidden;float:left;'}>
            {data.label}
            <span v-show={data.techPostFlag} style='color:red'> (科技成果岗位指标已超过5年)</span>
          </span>
        </div>
      )
    },
    unitshow (id) {
      console.log(id)
      this.$router.push({name: 'postMain', query: {unitId: id}})
    },
    // 获取列表
    getDept () {
      this.loadingtext = '正在加载...'
      this.startBtnsVisible = false
      this.listLoading = true
      // var personParams = { Page: 0, Pagenum: 20, Personname: '', Unitkey: '', Sortkey: '', Isace: true, timestamp: new Date().getTime() }
      this.$http
        .get(this.$http.defaults.postAPI + `api/cadrePostBusUnit/getUnitTree`)
        .then(response => {
          this.listLoading = false
          if (response.data.success === true) {
            console.log('获取成功')
            this.loadingtext = '无匹配数据'
            this.deptlist = response.data.result
          } else {
            console.log('获取失败:' + response.data.message)
            this.$message({
              message: '获取失败:' + response.data.message,
              type: 'error'
            })
          }
        })
        .catch(error => {
          console.log(error)
          this.$message({
            message: '获取失败:' + error,
            type: 'error'
          })
        })
    },
    tableresize (obj) {
      var clientHeight = 0
      if (document.body.clientHeight && document.documentElement.clientHeight) {
        clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight
      } else {
        clientHeight = (document.body.clientHeight > document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight
      }
      obj.$nextTick(function () {
        obj.tableHeight = clientHeight - 172
      })
    }
  },
  mounted () {
    this.getDept()
    this.tableresize(this)
    window.onresize = () => {
      // 通过捕获系统的onresize事件触发我们需要执行的事件
      this.tableresize(this)
    }
  }
}
</script>
<style scoped>
#Shenghuohui{
  padding: 0
}
</style>
<style>
#postDetail .el-table .row-b{
  font-weight:bolder
}
#listtree i{
  padding-right:5px;
}
i.icon-wenjianjia1{
  color:#ffc500 !important;
}
i.icon-cf-c24{
  color:#1296db !important;
}
i.icon-danwei{
  color:#6fb400 !important;
}
#listtree {
  clear: both;
  height:100%;
  margin-top:0;
  overflow: hidden;
}
#listtree .el-tree-node__content{
  height:50px;
}
#listtree .nodelist{
  font-size:var(--size) !important;
  line-height: 50px;
}
#listtree .nodelist .el-progress {
  padding:15px 0 0;
}
#listtree .el-tree{
  background: #fff;
}
 #postDetail .wboxd{
    padding:10px;
    width: calc(100% - 20px);
    background: #fff;
    border: 1px solid #95B8E7;
    margin:0 10px;
    overflow: hidden;
  }
  .el-badge__content.is-fixed.is-dot{
    top:7px
  }
</style>
